<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 256px;
            height: 760px;
            background-color: #515a6e;
            text-align: center;
        }
        .csdnImg{
            /* position: relative; */
            height: 40px;
            width: 150px;
            line-height: 32px;
            
        }
        .webImg{
            width: 24px;
            height: 24px;
            margin-right: 8px;
            border-radius: 2px;
            
        }
        #suliang{
            display: inline-block;
            height: 24px;
            text-align: center;
            font-size: 20px;
            color: #fff;
            font-weight: 500;
            white-space: nowrap;
            line-height: 100%;
            /* background-color: antiquewhite; */
            cursor: pointer;
        }
        .childDiv{
            display: flex;
            flex-direction: column;
            align-items: center;
            overflow: hidden;
            width: 256px;
            position: relative;
            margin-bottom: 5px;
            box-sizing: border-box;
            transition:all 0.5s;
            height: 170px;
        
        }
        .menuList{
            border: 2px gray solid;
            width: 230px;
            border-radius: 10px;
            padding: 14px 24px;
            /* position: absolute; */
            cursor: pointer;
            height: 52px;
            box-sizing: border-box;
            text-align:justify;
        }
        .menuList>img{
            width: 20px;
            height: 20px;
            /* align:top; */
            margin-right: 5px;

        }
        .menuList:hover{
            color: #fff;
            transition: 0.4s;
        }
        a{
            text-decoration: none;
            color: #191a23;
            margin: 10px;
        }
        a:hover{
            color: #fff;
            transition: 0.4s;
        }
        .change{
            height: 52px;
            transition: 0.6s;
        }
    </style>
</head>
<body>
    <div class="box">
        <img src="https://csdnimg.cn/release/ccloud/img/ccloud-logo.fdf3c711.png" alt="" class="csdnImg">
        <br>
        <!-- <img src="https://img-community.csdnimg.cn/avatar/cbe53133b4e84b59917aefeaeacb6615.jpg?x-oss-process=image/resize,m_fixed,h_88,w_88" alt="" class="webImg"> -->
        <p id="suliang"><img src="https://img-community.csdnimg.cn/avatar/cbe53133b4e84b59917aefeaeacb6615.jpg?x-oss-process=image/resize,m_fixed,h_88,w_88" alt="" class="webImg" align="top">前端修炼社（苏凉）</p>     
        <div class="childDiv">
            <span class="menuList"><img src="../img/用户.png" alt="" align="top"> 用户</span>
            <a href="#">用户管理</a>
            <a href="#">用户配置</a>
        </div>

        <div class="childDiv change">
            <span class="menuList"><img src="../img/内容模型设置.png" alt="" align="top">内容</span>
            <a href="#">内容管理</a>
            <a href="#">内容收录</a>
        </div>

        <div class="childDiv change">
            <span class="menuList"> <img src="../img/137设置、系统设置、功能设置、属性-线.png" alt="" align="top">功能配置</span>
            <a href="#">频道管理</a>
            <a href="#">信息管理</a>
            <a href="#">广告位配置</a>
        </div>

        <div class="childDiv change">
            <span class="menuList"> <img src="../img/管理员.png" alt="" align="top">管理员</span>
            <a href="#">管理员配置</a>
        </div>
    </div>
    <script>
        //获取span标签
        let menuList = document.getElementsByClassName('menuList');
        //获取div
        let childDiv = document.getElementsByClassName('childDiv');
        
        
        let open = childDiv[0];

        // let childDivHeight = childDiv.offsetHeight;
        // alert(childDivHeight)

        //给span绑定单击响应函数
        for(let i=0;i<menuList.length;i++){
            menuList[i].addEventListener('click',function(){
                // alert('11')
                let parentDiv = this.parentNode;
                // alert(parentDiv.offsetHeight)
                toggleClass(parentDiv,'change')
                if(parentDiv != open && !hasClass(open,'change')){
                    toggleClass(open,'change')
                };
                open = parentDiv;
            })
        }

         //判断是否含有clsssname
         function hasClass(obj,cn){
            let reg = new RegExp("\\b" + cn + "\\b");
            return reg.test(obj.className);
            // alert(reg);
        }

        //添加class
        function addClass(obj,cn){
            // let reg = new RegExp("\\b" + cn + "\\b");
            obj.className += ' '+ cn;
        }

        //删除class
        function removeClass(obj,cn){
            let reg = new RegExp("\\b" + cn + "\\b");
            obj.className = obj.className.replace(reg,"");
        }

        //替换class
        function toggleClass(obj,cn){
            if(hasClass(obj,cn)){
                removeClass(obj,cn);
            }else{
                addClass(obj,cn);
            };
        }
    </script>
</body>
</html>